import React from 'react';
import { Link } from 'react-router-dom';

const data = [
  { id: 1, name: '商品A' },
  { id: 2, name: '商品B' },
  { id: 3, name: '商品C' },
];

// React.FC 是React中函数组件的类型注解
// 用于标识该组件是一个接收props并返回JSX的函数
// 提供了完整的类型检查支持，包括props和children的类型推断
// 确保组件符合React函数组件的标准结构
/**
 * List组件
 * 
 * 该组件用于展示一个列表页面，显示数据项的名称，并提供到详情页的链接
 * 
 * @returns 返回一个包含标题和数据列表的React元素
 */

const List: React.FC = () => {
  return (
    <div className="p-8">
      <h1 className="text-2xl font-bold mb-4">列表页</h1>
      <ul>
        {data.map(item => (
          <li key={item.id} className="mb-2">
            <Link to={`/detail/${item.id}`} className="text-blue-500 underline">{item.name}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default List;
